<!-- 登录 -->
<template>
  <IonPage>
    <IonContent>
      <div>
        <p class="welcome">welcome!</p>
      </div>
      <!-- 账号输入框 -->
      <input
        type="text"
        class="input_user"
        placeholder="用户名"
        maxlength="20"
        v-model="user"
      />
      <!-- 密码输入框 -->
      <input
        type="password"
        class="input_pwd"
        placeholder="密码"
        maxlength="20"
        v-model="pwd"
      />
      <button class="btn_login" @click="loginApp">登录</button>
      <p class="account">
        没有帐户,<IonText color="#ff4322" class="account_regiter"
          > <span @click="toRegister">注册？</span>
        </IonText>
      </p>
    </IonContent>
  </IonPage>
</template>

<script lang="ts" setup>
import { IonText, IonPage, IonContent, IonButton} from "@ionic/vue";
import { CapacitorHttp } from "@capacitor/core";
import axios from "axios";
import { ref } from "vue";
import router from "@/router";
// import { RouterLink } from 'vue-router';

      let user= ref("")
      let pwd=ref("") 

   const loginApp=() =>{
      // 解析后端数据
      // axios
      //   .get("http://4221xv6hk847.vicp.fun/user")
      //   .then((response) => {
      //     // 处理成功情况
      //     console.log(response);

      //     if (
      //       this.user === response.data.username &&
      //       this.pwd === response.data.pwd
      //     ) {
      router.push("/main");
      //     } else {
      //       console.log(this.user===response.data.username);
      //       console.log(this.pwd===response.data.pwd);

      //       alert("账号密码错误");
      //     }
      //   })
      //   .catch((error) => {
      //     // 处理错误情况
      //     console.log(error);
      //     alert(error);
      //   });

      // 第二种请求后端的库
      // const doGet = () => {
      //   const options = {
      //     url: "http://4221xv6hk847.vicp.fun/user",
      //     allowSelfSignedCertificates: true,
      //   };

      //   CapacitorHttp.get(options)
      //     .then((response) => {
      //       console.log(response.data.username);
      //       alert(response.data.username);
      //     })
      //     .catch((error) => {
      //       alert(error)
      //     });
      // };
      // doGet();
    }
    const toRegister=()=>{
      router.push('/register')

};
</script>
<style scoped>
IonContent {
  text-align: center;
}
.welcome {
  color: gray;
  font-size: 35px;
  margin-top: 5vh;
  margin-left: 10vw;
}

.input_user {
  margin: auto;
  margin-top: 20vh;
  width: 70vw;
  /* 块级元素会换行 */
  display: block;
  border: 0vw;
  border-bottom: 0.5vw solid black;
  font-size: 5vw;
  outline: none;
}

.input_pwd {
  margin: auto;
  margin-top: 7vh;
  width: 70vw;
  /* 块级元素会换行 */
  display: block;
  border: 0vw;
  border-bottom: 0.5vw solid black;
  font-size: 5vw;
  /* input消失 */
  outline: none;
}

.btn_login {
  width: 50vw;
  height: 8vh;
  font-size: 7vw;
  background: #3498db;
  color: white;
  border: 0vw;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 20vw;
  /* margin-left: 20vw; */
  /* margin: 0 auto; */
}

.account {
  /* display: block; */
  font-size: 5vw;
  color: gray;
  margin-top: 40vw;
  /* margin-left: auto; */
  /* margin-right: auto; */
text-align: center
}

.account_regiter {
  color: #3498db;
}

.login_register {
  color: blue;
}
</style>
